---
title: Installer Astro
sidebar:
  label: Installation
description: 'Comment installer Astro et démarrer un nouveau projet.'
i18nReady: true
---
import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import ReadMore from '~/components/ReadMore.astro';

La [commande CLI `create astro`](#installer-à-partir-de-lassistant-cli) est le moyen le plus rapide pour démarrer un nouveau projet vierge Astro. Elle vous accompagnera à travers chaque étape pour configurer votre nouveau projet Astro et elle vous permettra de choisir parmi différents modèles de démarrage officiels. 

Vous pouvez également exécuter la commande CLI avec l'option `template` pour commencer votre projet en utilisant n'importe quel thème ou modèle de démarrage existant. Découvrez notre [vitrine de thèmes et de modèles de démarrage](https://astro.build/themes/) où vous pouvez parcourir des thèmes pour les blogs, les portfolios, les sites de documentation, les pages d'atterrissage et plus encore !

Si vous préférez installer Astro manuellement, consultez notre [guide d'installation manuelle étape par étape](#configuration-manuelle).

:::tip[Aperçus en ligne]
Vous préférez essayer Astro dans votre navigateur ? Consultez [astro.new](https://astro.new/) pour parcourir nos modèles de démarrage et lancez un nouveau projet Astro sans avoir besoin de quitter votre navigateur.
:::

## Prérequis

- **Node.js** - `v18.20.8` ou `v20.3.0`, `v22.0.0` ou supérieure. (`v19` et `v21` ne sont pas prises en charge.)
- **Éditeur de texte** - Nous recommandons [VS Code](https://code.visualstudio.com/) avec notre [extension officielle Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).
- **Terminal** - Astro est accessible via son interface en ligne de commande (CLI).

## Compatibilité avec les navigateurs

Astro est construit avec Vite, qui cible par défaut les navigateurs prenant en charge le JavaScript moderne. Pour une référence complète, vous pouvez consulter la [liste des versions de navigateurs actuellement prises en charge par Vite](https://vite.dev/guide/build.html#browser-compatibility).

## Installer à partir de l'assistant CLI

Vous pouvez exécuter `create astro` n'importe où sur votre machine, il n'est donc pas nécessaire de créer un nouveau répertoire vide pour votre projet avant de commencer. Si vous n'avez pas encore de répertoire vide pour votre nouveau projet, l'assistant vous aidera à en créer un automatiquement.

<Steps>
1. Exécutez la commande suivante dans votre terminal pour démarrer l’assistant d’installation :

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      # créer un nouveau projet avec npm
      npm create astro@latest
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      # créer un nouveau projet avec pnpm
      pnpm create astro@latest
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      # créer un nouveau projet avec yarn
      yarn create astro
      ```
      </Fragment>
    </PackageManagerTabs>

    Si tout se passe bien, vous verrez un message de réussite suivi de quelques étapes complémentaires recommandées.

2. Maintenant que votre projet a été créé, vous pouvez accéder à votre nouveau répertoire de projet pour commencer à utiliser Astro.

3. Si vous avez ignoré l’étape « Installer les dépendances ? » de l’assistant CLI, assurez-vous d’installer vos dépendances avant de continuer.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm install
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn install
      ```
      </Fragment>
    </PackageManagerTabs>

4. Vous pouvez maintenant [démarrer le serveur de développement d'Astro](/fr/develop-and-build/#démarrer-le-serveur-de-développement-dastro) et visualiser un aperçu en direct de votre projet pendant que vous le construisez !
</Steps>

## Options d'installation du CLI

Vous pouvez exécuter la commande `create astro` avec des options supplémentaires pour personnaliser le processus de configuration (par exemple, répondre « oui » à toutes les questions, ignorer l'animation de Houston) ou votre nouveau projet (par exemple installer ou non git, ajouter des intégrations).

<ReadMore>Voir [toutes les options disponibles pour la commande `create astro`](https://github.com/withastro/astro/blob/main/packages/create-astro/README.md).</ReadMore>

### Ajouter des intégrations

Vous pouvez démarrer un nouveau projet Astro et installer toutes les [intégrations officielles](/fr/guides/integrations-guide/) ou intégrations communautaires prenant en charge la commande `astro add` en passant l'argument `--add` à la commande `create astro`.

Exécutez la commande suivante dans votre terminal, en remplaçant toute intégration prenant en charge la commande `astro add` :

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # créer un nouveau projet avec React et Partytown
  npm create astro@latest -- --add react --add partytown
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # créer un nouveau projet avec React et Partytown
  pnpm create astro@latest --add react --add partytown
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # créer un nouveau projet avec React et Partytown
  yarn create astro --add react --add partytown
  ```
  </Fragment>
</PackageManagerTabs>

### Utiliser un thème ou un modèle de démarrage

Vous pouvez démarrer un nouveau projet Astro en vous basant sur un [exemple officiel](https://github.com/withastro/astro/tree/main/examples) ou sur la branche `main` de n'importe quel dépôt Github en utilisant l'argument `--template` avec la commande `create astro`.

Exécutez la commande suivante dans votre terminal, en remplaçant le nom officiel du modèle de démarrage Astro ou le nom d'utilisateur GitHub et le dépôt du thème que vous souhaitez utiliser :

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # créer un nouveau projet avec un exemple officiel
  npm create astro@latest -- --template <nom-exemple>

  # créer un nouveau projet basé sur la branche principale d'un dépôt GitHub
  npm create astro@latest -- --template <utilisateur-github>/<depot-github>
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # créer un nouveau projet avec un exemple officiel
  pnpm create astro@latest --template <nom-exemple>
  
  # créer un nouveau projet basé sur la branche principale d'un dépôt GitHub
  pnpm create astro@latest --template <utilisateur-github>/<depot-github>
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # créer un nouveau projet avec un exemple officiel
  yarn create astro --template <nom-exemple>
  
  # créer un nouveau projet basé sur la branche principale d'un dépôt GitHub
  yarn create astro --template <utilisateur-github>/<depot-github>
  ```
  </Fragment>
</PackageManagerTabs>

Par défaut, cette commande utilisera la branche `main` du dépôt de modèles. Pour utiliser un nom de branche différent, transmettez-le en tant que valeur pour l'argument `--template` : `<utilisateur-github>/<depot-github>#<branche>`.

## Configuration manuelle

Ce guide vous accompagnera à travers les étapes pour installer et configurer manuellement un nouveau projet Astro.

Si vous préférez ne pas utiliser notre outil CLI automatique `create astro`, vous pouvez configurer votre projet par vous-même en suivant le guide ci-dessous.

<Steps>
1. Créez votre dossier

    Créez un dossier vide portant le nom de votre projet, puis déplacez-vous à l'intérieur.

    ```bash
    mkdir mon-projet-astro
    cd mon-projet-astro
    ```

    Une fois que vous êtes dans votre nouveau répertoire, créez le fichier `package.json` de votre projet. C'est ainsi que vous gérerez les dépendances de votre projet, y compris Astro. Si vous n'êtes pas familier avec ce format de fichier, exécutez la commande suivante pour en créer un.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm init --yes
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm init 
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn init --yes
      ```
      </Fragment>
    </PackageManagerTabs>

2. Installez Astro

    Commencez par installer les dépendances du projet Astro dans votre projet.

    :::note[Important]
    Astro doit être installé localement, et non globalement. Assurez-vous que vous **n'utilisez pas** `npm install -g astro` `pnpm add -g astro` ou `yarn add global astro`.
    :::

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install astro
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add astro
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add astro
      ```
      </Fragment>
    </PackageManagerTabs>

    Puis, remplacez la section « scripts » par défaut de votre fichier `package.json` par ce qui suit :

    ```json title="package.json" del={3} ins={4-6}
    {
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "astro dev",
        "build": "astro build",
        "preview": "astro preview"
      },
    }
    ```

    Vous utiliserez ces scripts plus loin dans le guide pour démarrer Astro et exécuter ses différentes commandes.

3. Créez votre première page

    Dans votre éditeur de texte, créez un nouveau fichier dans votre dossier  à l'emplacement `src/pages/index.astro`. Ce sera votre première page Astro dans le projet.

    Pour ce guide, copiez et collez l'extrait de code suivant (en incluant les tirets `---`) dans votre nouveau fichier :

    ```astro title="src/pages/index.astro"
    ---
    // Bienvenue dans Astro ! Tout ce qui se trouve entre ces délimiteurs de
    // code à trois tirets est le « frontmatter de votre composant ». Il ne
    // s'exécute jamais dans le navigateur.
    console.log("Ceci s'exécute dans votre terminal, et non dans le navigateur !");
    ---
    <!-- Ci-dessous se trouve le « modèle de votre composant ». C'est simplement
        du HTML, mais avec un peu de magie à l'intérieur pour vous aider à
        construire de superbes modèles. -->
    <html>
      <body>
        <h1>Hello, World!</h1>
      </body>
    </html>
    <style>
      h1 {
        color: orange;
      }
    </style>
    ```

4. Créez votre première ressource statique

    Vous voudrez également créer un dossier `public/` pour stocker vos ressources statiques. Astro inclura toujours ces ressources dans votre version finale, afin que vous puissiez les référencer en toute sécurité à partir de vos modèles de composants.

    Dans votre éditeur de texte, créez un nouveau fichier dans votre dossier à l'emplacement `public/robots.txt`. `robots.txt` est un fichier simple que la plupart des sites incluent pour indiquer aux robots de recherche comme Google comment traiter votre site.

    Pour ce guide, copiez et collez l'extrait de code suivant dans votre nouveau fichier :

    ```diff title="public/robots.txt"
    # Exemple : Autoriser tous les robots à scanner et indexer votre site.
    # Syntaxe complète : https://developers.google.com/search/docs/advanced/robots/create-robots-txt
    User-agent: *
    Allow: /
    ```

5. Créez le fichier `astro.config.mjs`

    Astro est configuré en utilisant `astro.config.mjs`. Ce fichier est optionnel si vous n'avez pas besoin de configurer Astro mais vous souhaiterez peut-être le créer maintenant.

    Créez `astro.config.mjs` à la racine de votre projet et copiez le code ci-dessous à l'intérieur :

    ```js title="astro.config.mjs"
    import { defineConfig } from "astro/config";

    // https://astro.build/config
    export default defineConfig({});
    ```

    Si vous souhaitez ajouter des [composants de framework UI](/fr/guides/framework-components/) comme React, Svelte, etc. ou utiliser d'autres outils comme MDX ou Partytown dans votre projet, c'est ici que vous [importerez et configurerez manuellement les intégrations](/fr/guides/integrations-guide/).

    <ReadMore>Consultez la [référence de l'API de configuration](/fr/reference/configuration-reference/) d'Astro pour plus d'informations.</ReadMore>

6. Ajoutez la prise en charge de TypeScript

    TypeScript est configuré en utilisant `tsconfig.json`. Même si vous n'écrivez pas de code TypeScript, ce fichier est important pour que les outils comme Astro et VS Code puissent comprendre votre projet. Certaines fonctionnalités (comme l'importation de paquets npm) ne sont pas entièrement prises en charge dans l'éditeur sans un fichier `tsconfig.json`. 

    Si vous avez l'intention d'écrire du code Typescript, l'utilisation des modèles `strict` ou `strictest` d'Astro est recommandée. Vous pouvez consulter et comparer les trois modèles de configuration dans [astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/).

    Créez le fichier `tsconfig.json` à la racine de votre projet et copiez le code ci-dessous à l'intérieur. (Vous pouvez utiliser `base`, `strict` ou `strictest` pour votre modèle TypeScript) :

    ```json title="tsconfig.json" "base"
    {
      "extends": "astro/tsconfigs/base"
    }
    ```

    <ReadMore>Consultez le [guide d'Astro sur la configuration de TypeScript](/fr/guides/typescript/#configuration) pour plus d'informations.</ReadMore>

7. Prochaines étapes

    Si vous avez suivi les étapes ci-dessus, le dossier de votre projet devrait maintenant ressembler à ça :

    <FileTree>
    - node_modules/
    - public/
      - robots.txt
    - src/
      - pages/
        - index.astro
    - astro.config.mjs
    - package-lock.json ou `yarn.lock`, `pnpm-lock.yaml`, etc.
    - package.json
    - tsconfig.json
    </FileTree>

8. Vous pouvez maintenant [démarrer le serveur de développement d'Astro](/fr/develop-and-build/#démarrer-le-serveur-de-développement-dastro) et visualiser un aperçu en direct de votre projet pendant que vous le construisez !

</Steps>
